/**
 * Author: Shen Yanqiu
 * Date: 2018-02-24
 * Time: 11:34
 *
 */
import React from 'react';
import { XAxis, YAxis, CartesianGrid, CartesianAxis, Area, AreaChart, Tooltip,
  ResponsiveContainer } from 'recharts';
import CustomTooltip from './CustomTooltip';

export default class AreaChartBlock extends React.Component {
  render() {
    const { data } = this.props;
    return (
      <ResponsiveContainer width="100%" height={300}>
        <AreaChart data={data} margin={{top: 50, right: 60, left: 0, bottom: 0}}>
          <XAxis dataKey="name" tickMargin={20} tickSize={0} height={60} axisLine={{stroke: '#EBEBEB', strokeWidth: 1}} />
          <YAxis tickLine={false} axisLine={{stroke: '#EBEBEB', strokeWidth: 1}}/>
          <Tooltip cursor={{ stroke: '#797979' }} content={<CustomTooltip/>} />
          <Area type='monotone' dataKey='uv' stroke='#61B4F0' strokeWidth="2" fill='#ADD6F0' fillOpacity={0.5} />
        </AreaChart>
      </ResponsiveContainer>
    );
  }
}
